<template>
  <div class="person">
    姓：<input type="text" v-model="firstName" /> <br />
    名：<input type="text" v-model="lastName" /> <br />
    全名：<span>{{ fullName }}</span
    ><br />
    <button @click="changeFullName">changeFullName</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed, ref } from "vue";
let firstName = ref("tom");
let lastName = ref("jackson");

// 这么定义的“计算属性”是只读的，不可修改
/**
 let fullName = computed(() => {
  return (
    firstName.value.slice(0, 1).toUpperCase() +
    firstName.value.slice(1) +
    "-" +
    lastName.value
  );
});
 */
// 这种定义才是可读可写的，参考： https://cn.vuejs.org/guide/essentials/computed.html
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(val) {
    const [str1, str2] = val.split("-");
    firstName.value = str1;
    lastName.value = str2;
  },
});

function changeFullName() {
  fullName.value = "john-doe";
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
